import React, { Fragment }  from 'react';
import style from './index.less';
import ReactMarkdown from 'react-markdown';
import { Card,Row,Col,Collapse,Rate,Icon,Button,Radio, Tag } from 'antd';

import isArray from 'lodash/isArray';
import forEach from 'lodash/forEach';
import _ from 'lodash';

import Charts1 from '../Charts1';
import Charts2 from '../Charts2';
import Charts3 from '../Charts3';
import Charts4 from '../Charts4';

const Panel = Collapse.Panel;


const collapseStyle={
  background:'none',
}
const panelStyle = {
  background:'rgba(51, 153, 255, 0.25)',
  marginBottom: 24,
  border: 0,
  overflow: 'hidden',
}

const checkout=({
  id,
  value,
  valueArr,
  comment
  })=>{
  let index,ii,arr,title=''
  if(valueArr){
    ii=checkIndex({
      num:value*1,
      numArr:valueArr
    })
    index=(ii||ii===0)?ii:valueArr.length
    arr=eval(`comment.${id}_${index}`)
  }else{
    arr=comment
  }
  title=arr[parseInt(Math.random()*(arr.length-1))].replace("_$_",value).replace("_#_",value)+'\n'
  return title
}

const checkIndex=({
  num=0,
  numArr=[20, 40, 60, 70]
  })=>{
  for(let i in numArr){
    if(numArr[i]>=num){
      return i*1
    }
  }
}

export default class General extends React.Component{

  render() {
    const {
      info,
      trader,
      trend,
      notesConfig,
      labels,
      fdtScore,
    } = this.props;

    const title=`${trader} 的投资交易评价`
    const charts1={
      name:'得分',
      value:fdtScore.info.fdtScore&&fdtScore.info.fdtScore.toFixed(2)||0
    }
    
    const { fieldList } = fdtScore;
    const profitabilityField = _.find(fdtScore.fieldList, { id: 'profitability'});
    const activityField = _.find(fdtScore.fieldList, { id: 'activity'});
    const riskControlField = _.find(fdtScore.fieldList, { id: 'riskControl'});
    const consistencyField = _.find(fdtScore.fieldList, { id: 'consistency'});
    const charts2 = {
      name: ['综合交易能力'],
      indicator: [
        { name: profitabilityField.name, max: profitabilityField.max},
        { name: activityField.name, max: activityField.max},
        { name: riskControlField.name, max: riskControlField.max},
        { name: consistencyField.name, max: consistencyField.max},
      ],
      data:[
        {
          value: [
            fdtScore.info.profitability && fdtScore.info.profitability.toFixed(2) || 0,
            fdtScore.info.activity && fdtScore.info.activity.toFixed(2) || 0,
            fdtScore.info.riskControl && fdtScore.info.riskControl.toFixed(2) || 0,
            fdtScore.info.consistency && fdtScore.info.consistency.toFixed(2) || 0
          ]
        }
      ]
    }
    const charts3={
      name:['每日平仓盈亏','每日浮动盈亏'],
      data:trend.map((item,i)=>[
        item.dataDate,
        item.closedPositionsPnl&&item.closedPositionsPnl.toFixed(2)||0,
        item.openPositionsPnl&&item.openPositionsPnl.toFixed(2)||0
      ])
    }
    const charts4={
      name:['资产净值'],
      data:trend.map((item,i)=>[
        item.dataDate,
        item.unitPrice&&item.unitPrice.toFixed(2)||0
      ])
    }
    const notes=function(){
      let titles=''
      const generalNote=[
        {
          id:"fdt_score",
          value:fdtScore.info.fdtScore&&fdtScore.info.fdtScore.toFixed(2)||0,
          valueArr:notesConfig.dimension_pivots.fdt_score,
          comment:notesConfig.comment_text.fdt_score
        }
      ]
      if(notesConfig){
        generalNote.map(item=>{
          if(item.value&&((item.trigger&&item.score<item.trigger)||!item.trigger)){
            titles+=checkout(item)
          }
        })
      }
      return titles
    }

    return(
      <Card
        title={title}
        bordered={true}
        
        className={`${style.card} survey`}
        >
        <Row>
          <Col xs={24} sm={24} md={24} lg={12} xl={12}>
            <h3>综合评价</h3>
            <Row>
              <Col xs={10} sm={10} md={10} lg={10} xl={10}>
                <Charts1 {...charts1} />
              </Col>
              <Col xs={14} sm={14} md={14} lg={14} xl={14}>
                <Charts2 {...charts2} />
              </Col>
            </Row>
            {
              isArray(labels) && labels.length > 0 && <div style={{
                margin:'24px',
              }}>
                <table>
                  <tr>
                    <td style={{ width: 48 }}>标签：</td>
                  <td>
                  {
                    labels.map((label, i) => (
                      <Tag key={`label${i}`} style={{ marginTop: 8 }}>{label}</Tag>
                    ))
                  }
                  </td>
                  </tr>
                </table>
              </div>
            }
            <div style={{
              border:'2px #999 dashed',
              padding:'10px 24px',
              margin:'24px',
              fontSize:'16px'
            }}>
              <ReactMarkdown source={notes()} />
            </div>
          </Col>
          <Col  xs={24} sm={24} md={24} lg={12} xl={12}>
            <h3>盈亏走势</h3>
            <Row>
              <Col span={24}><Charts3 {...charts3} /></Col>
            </Row>
            <Row style={{
              marginTop: 24,
            }}>
              <Col span={24}><Charts4 {...charts4} /></Col>
            </Row>
          </Col>
        </Row>
      </Card>
    )
  }
}
